import {Icon,Modal ,Input,message,Layout} from 'antd';
import React from 'react';


import Markdown  from 'react-markdown';
import CryptoJS  from 'crypto-js';

const {Footer} = Layout;
class JsPage extends  React.Component {
    constructor(props) {
        super(props);
        if(!window.erred) {
            window.erred = 0;
        }else if(window.erred && window.erred > 2 && window.erred  <= 3){
            message.error('你已经受限访问');
            window.erred = window.erred +1 ;
        }else if(window.erred > 3 ){
            window.location.replace("http://news.baidu.com/")
        }
        this.state = {
            key:'',
            visible: window.erred <=3,
            pass1:false,
            key2:'',
            visible2: false,
            data:(window.erred <=3)?'':'你已经受限访问。',
        }

    }
    passs = "U2FsdGVkX1+Qq71i91fTvXcbvv94NxyZFXY//YMXehY=";
    mytext = 'U2FsdGVkX18eTlakusxPNrcfbCf9mRBIjFCqGo1yvGU=';

    showNothing = () => {
        this.setState({
            visible: false,
            pass1: false,
            data:"哈哈哈哈,什么也没有"
        });
        if(window.erred){
            window.erred = window.erred +1 ;
            if(window.erred >3){
                message.error('你已经受限访问');
                window.location.replace("http://news.baidu.com/")
                this.setState({
                    data:"你已经受限访问 "
                });
            }
        }else {
            window.erred = 1 ;
        }
    }


    handleOk = (e) => {
        if(this.state.key){
            let ssss =  this.passs.trim().split('\n');
            let word ='';
            ssss.forEach(function(value){
                word+=value;
            });
            window.erred = 0;
            try{
                let bytes  = CryptoJS.AES.decrypt(word,this.state.key);
                let right_pass = bytes.toString(CryptoJS.enc.Utf8);
                if(right_pass){
                    this.setState({
                        visible: false,
                        pass1: true,
                        data:"这是一段中文"
                    });
                }else {
                    this.showNothing();
                }
            }catch (e) {
                this.showNothing();
            }

        }else{
            this.showNothing();
        }
    }
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }
    emitEmpty = () => {
        this.keyInput.focus();
        this.setState({ key: '' });
    }
    onChangeUserName = (e) => {
        this.setState({ key: e.target.value });
    }

    onChangeUserName2 = (e) => {
        this.setState({ key2: e.target.value });
    }
    handleCancel2 = (e) => {
        this.setState({
            visible2: false,
        });
    }
    handleOk2 = (e) => {
        let ssss =  this.mytext.trim().split('\n');
        let word ='';
        ssss.forEach(function(value){
            word+=value;
        });
        window.erred = 0;
        try {
            let bytes = CryptoJS.AES.decrypt(word, this.state.key2);
            let plaintext = bytes.toString(CryptoJS.enc.Utf8);
            this.setState({
                visible2: false,
                data: plaintext
            });
        }catch (e) {
            this.showNothing();
        }
    }
    emitEmpty2 = () => {
        this.keyInput.focus();
        this.setState({ key2: '' });
    }
    eye= () =>{
        if(!this.state.pass1){
            return ;
        }
        if(this.state.visible2){
            return ;
        }
        this.setState({
            visible2: true,
        });
    }



    eye_invisible= () =>{
        if(!this.state.pass1){
            return ;
        }
        if(this.state.visible2){
            return ;
        }
        this.setState({
            visible2: false,
            data: "这是一段英文"
        });
    }



    render() {
        const suffix = key ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
        const suffix2 = key2 ? <Icon type="close-circle" onClick={this.emitEmpty2} /> : null;
        const {key,key2} = this.state;

        return (
            <div >
                <Modal
                    title="未经允许不可查看原文!"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >

                 <img src={require('../../imgs/wx.png' )}  style={{height:"100%",width:"100%",marginBottom:"10px"}}/>
                <Input
                    placeholder="请输入许可码!"
                    prefix={<Icon type="question-circle-o" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    suffix={suffix}
                    value={key}
                    type="password"
                    onChange={this.onChangeUserName}
                    ref={node => this.keyInput = node}
                />
                </Modal>

                    {/*
                      分割付  界面内容
                    */}
                <Markdown source={this.state.data}/>

                <Footer style={{textAlign: 'center'}}>
                    <a href="javascript:void(0)" onClick={this.eye}> <Icon type="eye" /></a>
                    <a href="javascript:void(0)" onClick={this.eye_invisible}><Icon type="lock" /></a>
                </Footer>



                <Modal
                    title="未经允许不能查看原文!"
                    visible={this.state.visible2}
                    onOk={this.handleOk2}
                    onCancel={this.handleCancel2}
                >

                <img src={require('../../imgs/wx.png' )}  style={{height:"100%",width:"100%",marginBottom:"10px"}}/>
                <Input
                    placeholder="请输入翻译码"
                    prefix={<Icon type="question-circle-o" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    suffix={suffix2}
                    value={key2}
                    type="password"
                    onChange={this.onChangeUserName2}
                    ref={node => this.keyInput = node}
                />

                </Modal>


            </div>
        );
    }
}

export default JsPage;